.contanier {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  position: relative;

  .topBar {
    position: relative;
    .rules {
      width: 80rpx;
      font-size: 30rpx;
      color: #000;
      line-height: 24rpx;
      position: absolute;
      bottom: 28rpx;
      right: 32rpx;
      z-index: 99999;
      white-space: nowrap;
    }
  }
  .title-bar {
    background: #fef5d6;
  }
  .mt-scroll {
    height: calc(100vh - 176rpx);
  }
  .top-area {
    height: 250rpx;
    width: 100%;
    background: linear-gradient(180deg, #fef5d6 0%, #fefbea 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    .rule {
      margin-top: 23rpx;
      width: 150rpx;
      height: 46rpx;
      border-radius: 100rpx;
      border: 2rpx solid #766c40;
      font-size: 24rpx;
      color: #766c40;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .tabs {
    margin-top: 22rpx;
    padding: 0 20rpx;
  }
  .detail-list {
    padding: 0 30rpx;
    position: relative;
    .list {
      padding: 20rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .list-title {
        display: flex;
        flex-direction: column;
      }
    }
  }
}

.grey {
  color: #c4c4c4 !important;
}

.red {
  color: #ff6161;
}

.green {
  color: #22b63b;
}

.empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, 100%);
  .empty-img {
    width: 160rpx;
    height: 160rpx;
  }

  .tips {
    margin-top: 18rpx;
    font-size: 30rpx;
    color: #999;
  }
}
